<template>
  <div class="container">
    <div id="mask"></div>
    <div id="sky">
      <div class="star star-1"></div>
      <div class="star star-2"></div>
      <div class="star star-3"></div>
      <div class="star star-4"></div>
      <div class="star star-5"></div>
      <div class="star star-6"></div>
      <div class="star star-7"></div>
      <div class="star star-8"></div>
      <div class="star star-9"></div>
      <div class="star star-10"></div>
      <div class="star star-11"></div>
      <div class="star star-12"></div>
      <div class="star star-13"></div>
      <div class="star star-14"></div>
      <!-- <div class="star star-15"></div>
      <div class="star star-16"></div> -->
      <div class="star star-17"></div>
    </div>
    <!-- <div id="moon"></div> -->
    <div id="stars">
      <div id="blink blink-1"></div>
      <div class="blink blink-2"></div>
      <div class="blink blink-3"></div>
      <div class="blink blink-4"></div>
      <div class="blink blink-5"></div>
      <div class="blink blink-6"></div>
      <div class="blink blink-7"></div>
      <div class="blink blink-8"></div>
      <div class="blink blink-9"></div>
      <div class="blink blink-10"></div>
      <div class="blink blink-11"></div>
      <div class="blink blink-12"></div>
      <div class="blink blink-13"></div>
      <div class="blink blink-14"></div>
      <div class="blink blink-15"></div>
      <div class="blink blink-16"></div>
      <div class="blink blink-17"></div>
      <div class="blink blink-18"></div>
      <div class="blink blink-19"></div>
      <div class="blink blink-20"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mapRange',
  data() {
    return {}
  },
  mounted() { }
}
</script>

<style lang="scss" scoped>
/*  ------------画布 ------------ */
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -10;
  left: 0;
  top: 0;
  overflow: hidden;
}

/* 遮罩层 */
#mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/images/charts-img-db_id_2p0mcnzpe7i000.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 900;
}

/* 天空背景 */
#sky {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 150, 255, 1),
      rgba(0, 150, 255, 0.8),
      rgba(0, 150, 255, 0.5));
  overflow: hidden;
  position: relative;
  /* 确保绝对定位子元素相对于此容器 */
}

/* 月亮 */
#moon {
  position: absolute;
  top: 50px;
  right: 200px;
  width: 100px;
  height: 100px;
  background: rgba(251, 255, 25, 0.938);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(251, 255, 25, 0.5);
  z-index: 10000;
}

/* 闪烁星星 */
#stars .blink {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 1);
  border-radius: 50%;
  z-index: 10000;
  animation: blingbling 3s linear infinite;
}

#stars .blink-1 {
  top: 200px;
  left: 500px;
  animation-delay: 1.5s;
}

#stars .blink-2 {
  top: 300px;
  left: 500px;
  animation-delay: 2.3s;
}

#stars .blink-3 {
  top: 400px;
  left: 800px;
  animation-delay: 1.8s;
}

#stars .blink-4 {
  top: 100px;
  left: 1000px;
  animation-delay: 1.7s;
}

#stars .blink-5 {
  top: 220px;
  left: 300px;
  animation-delay: 5s;
}

#stars .blink-6 {
  top: 280px;
  left: 400px;
  animation-delay: 2s;
}

#stars .blink-7 {
  top: 800px;
  left: 800px;
  animation-delay: 1.2s;
}

#stars .blink-8 {
  top: 860px;
  left: 650px;
  animation-delay: 1s;
}

#stars .blink-9 {
  top: 700px;
  left: 1000px;
  animation-delay: 1.5s;
}

#stars .blink-10 {
  top: 900px;
  left: 800px;
  animation-delay: 2s;
}

#stars .blink-11 {
  top: 400px;
  left: 600px;
  animation-delay: 1s;
}

#stars .blink-12 {
  top: 500px;
  left: 530px;
  animation-delay: 1.7s;
}

#stars .blink-13 {
  top: 300px;
  left: 300px;
  animation-delay: 0.9s;
}

#stars .blink-14 {
  top: 200px;
  left: 500px;
  animation-delay: 1.2s;
}

#stars .blink-15 {
  top: 900px;
  left: 500px;
  animation-delay: 1s;
}

#stars .blink-16 {
  top: 900px;
  left: 600px;
  animation-delay: 0.5s;
}

#stars .blink-17 {
  top: 870px;
  left: 960px;
  animation-delay: 1.3s;
}

#stars .blink-18 {
  top: 890px;
  left: 1090px;
  animation-delay: 0.7s;
}

#stars .blink-19 {
  top: 910px;
  left: 1160px;
  animation-delay: 1.1s;
}

#stars .blink-20 {
  top: 900px;
  left: 1260px;
  animation-delay: 0.8s;
}

/* 流星 */
#sky .star {
  position: absolute;
  opacity: 0;
  animation: fall 5s linear infinite;
  z-index: 10000;
}

.star::after {
  content: '';
  display: block;
  border: solid;
  border-width: 90px 0 90px 2px;
  /*流星随长度逐渐缩小*/
  border-color: transparent transparent rgba(255, 255, 255, 1) transparent;
  transform: rotate(44deg);
  transform-origin: 0 0 0;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
}

#sky .star-1 {
  top: 100px;
  left: 350px;
  animation-delay: 1s;
}

#sky .star-2 {
  top: 50px;
  left: 450px;
  animation-delay: 1.8s;
}

#sky .star-3 {
  top: 300px;
  left: 640px;
  animation-delay: 1.5s;
}

#sky .star-4 {
  top: 150px;
  left: 800px;
  animation-delay: 2.3s;
}

#sky .star-5 {
  top: 400px;
  left: 1000px;
  animation-delay: 2.7s;
}

#sky .star-6 {
  top: 100px;
  left: 1100px;
  animation-delay: 3s;
}

#sky .star-7 {
  top: -80px;
  left: 1100px;
  animation-delay: 3.2s;
}

#sky .star-8 {
  top: 200px;
  left: 800px;
  animation-delay: 3.2s;
}

#sky .star-9 {
  top: -100px;
  left: 300px;
  animation-delay: 2.9s;
}

#sky .star-10 {
  top: -20px;
  left: 700px;
  animation-delay: 3.8s;
}

#sky .star-11 {
  top: -20px;
  left: 800px;
  animation-delay: 3.1s;
}

#sky .star-12 {
  top: -20px;
  left: 900px;
  animation-delay: 3.4s;
}

#sky .star-13 {
  top: 20px;
  left: 800px;
  animation-delay: 2.8s;
}

#sky .star-14 {
  top: 80px;
  left: 1900px;
  animation-delay: 2.8s;
}

#sky .star-15 {
  top: 120px;
  left: 1400px;
  animation-delay: 2s;
}

#sky .star-16 {
  top: 700px;
  left: 1200px;
  animation-delay: 2.8s;
}

#sky .star-17 {
  top: 400px;
  left: 1500px;
  animation-delay: 1.8s;
}

/* ------------动画------------ */

/* 闪烁 */
@keyframes blingbling {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 流星 */
@keyframes fall {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-300px, 300px);
  }
}
</style>
